<template>
  <div class="flex items-center h-full">
    <template v-for="tool in tools" :key="tool.name">
      <div
        class="cursor-pointer"
        v-if="typeof tool.show === 'function' ? tool.show() : tool.show"
        @click="tool.action"
      >
        <el-icon>
          <component :is="tool.icon" />
        </el-icon>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { Fold, Expand } from "@element-plus/icons-vue";
import { useSystemStore } from "@/store/system";
import type { Component } from "vue";

const systemStore = useSystemStore();

type Tools = {
  name: string;
  icon: Component;
  show?: boolean | (() => boolean);
  type: string;
  action: () => void;
}[];
const tools: Tools = [
  {
    name: "折叠",
    icon: Fold,
    type: "undo",
    show: () => {
      return systemStore.showMenu;
    },
    action: () => {
      systemStore.toggleMenu();
    },
  },
  {
    name: "展开",
    icon: Expand,
    type: "undo",
    show: () => {
      return !systemStore.showMenu;
    },
    action: () => {
      systemStore.toggleMenu();
    },
  },
  // {
  //   name: "重做",
  //   icon: "icon-redo",
  //   type: "redo",
  //   action: () => {
  //     console.log("redo");
  //   },
  // },
  // {
  //   name: "清空",
  //   icon: "icon-clear",
  //   type: "clear",
  //   action: () => {
  //     console.log("clear");
  //   },
  // },
  // {
  //   name: "保存",
  //   icon: "icon-save",
  //   type: "save",
  //   action: () => {
  //     console.log("save");
  //   },
  // },
];
</script>
